{% extends "_layouts/examples.html" %}
{% from "_macros/vf_hero.jinja" import vf_hero %}

{% block title %}Hero / 50/50 / Without subtitle{% endblock %}
{% block standalone_css %}patterns_all{% endblock %}

{% set is_paper = true %}
{% block content %}

{% call(slot) vf_hero(
  title_text='H1 - ideally one line, up to two',
  layout='50/50-full-width-image'
) -%}
  {%- if slot == 'description' -%}
    <p>
      Generally, the height of the right hand side of a 50/50 split should contain more content than the left
      hand side.
    </p>
  {%- endif -%}
  {%- if slot == 'cta' -%}
    <a href="#" class="p-button--positive">Learn more</a>
    <a href="#">Contact us ›</a>
  {%- endif -%}
  {%- if slot == 'image' -%}
    <div class="p-image-container--cinematic is-cover">
      <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/a299c914-GettyImages-DataCenter.jpeg" alt="">
    </div>
  {% endif -%}
{% endcall -%}

{% endblock %}
